<template>
  <div class="home">
    <el-carousel arrow="never" trigger="click" height="540px">
      <el-carousel-item v-for="item in bannerText" :key="item.title">
        <h1>{{item.title}}</h1>
        <div>{{item.text}}</div>
        <el-button round>立即免费加入</el-button>
      </el-carousel-item>
    </el-carousel>
    <div class="bulletin-content">
      <div class="wrapper">
        <div>
          <i>new</i> 关于服务市场转账手续费变更公告
        </div>
        <div>
          <i>new</i>【接口变更】订单接口变更
        </div>
        <div>全部公告 ></div>
      </div>
    </div>
    <div class="content1 wrapper">
      <h2>资源优势和接入流程</h2>
      <div class="role-tab">
        <div :class="tabIndex==1?'role-active':''" @click="tab(1)">
          <strong>平台服务商</strong>
          <span>提供经营管理增值服务</span>
        </div>
        <div :class="tabIndex==2?'role-active':''" @click="tab(2)">
          <strong>企业服务商</strong>
          <span>提供订单商品基础服务</span>
        </div>
      </div>
      <div class="small-tab">
        <div :class="smallTabIndex==1?'':'small-active'" @click="smallTab(1)">资源优势</div>
        <strong style="margin:0 24px">•</strong>
        <div :class="smallTabIndex==2?'':'small-active'" @click="smallTab(2)">接入流程</div>
      </div>
      <div v-if="smallTabIndex==1" class="res-box">
        <div v-for="item in resources" :key="item.title">
          <img :src="item.img" alt />
          <div>{{item.title}}</div>
          <span>{{item.text}}</span>
        </div>
      </div>
      <div v-if="smallTabIndex==2" class="small-box">
        <div v-for="(item,index) in liucheng" :key="index">
          <div class="left">
            <div class="index">{{index}}</div>
            <div>{{item}}</div>
          </div>
          <i v-if="index!=5" class="el-icon-arrow-right"></i>
        </div>
      </div>
      <el-button round>入驻服务市场</el-button>
    </div>
    <div class="content2">
      <h2>平台优势</h2>
      <div class="wrapper">
        <div v-for="(item) in platform" :key="item.title" class="platform">
          <img :src="item.img" alt />
          <div class="right">
            <div class="title">{{item.title}}</div>
            <div class="text">{{item.text}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper content3">
      <span>优秀服务商推荐:</span>
      <img :src="item" v-for="(item,index) in recommend" :key="index" />
    </div>
    <div class="content4">
      <img src="https://shadow.elemecdn.com/faas/nest-fe/static/img/index-content4-bg.7535364.png" />
      <div>成就行业先锋典范，从加入饿了么开发者行列开始</div>
      <el-button round>立即免费加入</el-button>
    </div>
    <common-footer></common-footer>
  </div>
</template>

<script>
import CommonFooter from "@/components/CommonFooter.vue";

export default {
  components: {
    CommonFooter
  },

  data() {
    return {
      tabIndex: 1,
      smallTabIndex: 1,
      bannerText: [
        {
          title: "饿了么开放平台，连接千万商家",
          text: "与 3,000+ 位开发者一起，共建 O2O 行业良性生态"
        },
        {
          title: "服务市场火热招募中",
          text: "优秀服务商集合地，点金共赢就等你来"
        }
      ],
      platform: [
        {
          img:
            "",
          title: "线上快速对接",
          text:
            "提供完善的线上对接服务，无需咨询客服，开发者可无缝、便捷、高效地接入服务。"
        },
        {
          img:
            "",
          title: "业务深度开放",
          text: "基于商家需求，提供店铺、商品、订单、配送等业务在内的丰富接口。"
        },
        {
          img:
            "",
          title: "完善的服务支持",
          text:
            "提供稳定的沙箱测试环境和 7*24 小时自助测试服务，有完善的应用监控、服务告警。"
        },
        {
          img:
            "",
          title: "在线问答社区",
          text: "直接面对饿了么开发者，沟通更加有效，提问更加直接。"
        }
      ],
      recommend: [
        "",
        "",
        "",
        "",
        "",
        ""
      ]
    };
  },

  methods: {
    tab(index) {
      this.tabIndex = index;
    },

    smallTab(index) {
      this.smallTabIndex = index;
    }
  },

  computed: {
    resources() {
      let res1 = [
        {
          img:
            "",
          title: "服务市场",
          text: "打造专业服务市场，与商家端后台无缝对接，全平台分发您的应用"
        },
        {
          img:
            "",
          title: "海量活跃商家",
          text: "共享饿了么百万活跃商家资源，在线订购您的应用服务"
        },
        {
          img:
            "",
          title: "丰富的 IT 工具",
          text:
            "提供丰富的 API 接口，涵盖饿了么商家大量的核心功能，为合作伙伴提供多元服务"
        }
      ];
      let res2 = [
        {
          img:
            "",
          title: "丰富的 IT 工具",
          text:
            "提供测试工具、API 调试工具、服务监控、日志分析统计等丰富的解决方案"
        },
        {
          img:
            "",
          title: "沙箱环境",
          text: "数据独立，支撑开放业务功能测试需求"
        },
        {
          img:
            "",
          title: "丰富的 API 接口",
          text:
            "提供丰富的 API 接口，涵盖饿了么商家大量的核心功能，为合作伙伴提供多元服务"
        }
      ];
      return this.tabIndex == 1 ? res1 : res2;
    },
    liucheng() {
      let liuyan1 = [
        "商务接洽",
        "成为平台服务商",
        "资质审核",
        "创建平台应用",
        "开发测试",
        "上架服务市场"
      ];
      let liuyan2 = [
        "成为企业服务商",
        "资质审核",
        "创建企业应用",
        "开发调试",
        "应用上线",
        "商家授权"
      ];
      return this.tabIndex == 1 ? liuyan1 : liuyan2;
    }
  }
};
</script>

<style lang="scss" scoped>
.home {
  .content4 {
    width: 100%;
    height: 262px;
    position: relative;

    img {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
    }

    div {
      color: #fff;
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 40px;
      padding-top: 80px;
    }

    .el-button {
      color: #5b7ff1;
      background-color: #fff;
      font-size: 18px;
      font-weight: bold;
    }
  }

  .content3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 60px 0;

    span {
      font-size: 16px;
      color: #566166;
      font-weight: bold;
    }

    img {
      width: 80px;
    }
  }

  .content2 {
    background-color: #ebf5fa;

    h2 {
      color: #566166;
      margin-bottom: 60px;
      padding-top: 80px;
    }

    .wrapper {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .platform {
      width: 407px;
      display: flex;
      align-items: center;
      margin-bottom: 80px;

      img {
        width: 60px;
        height: 60px;
        margin-right: 50px;
      }

      .right {
        font-size: 18px;
        color: #819199;
        text-align: left;
      }

      .right .text {
        font-size: 14px;
        margin-top: 19px;
      }
    }
  }

  .content1 {
    h2 {
      color: #566166;
      margin: 100px auto 60px;
    }

    .res-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .res-box > div {
      width: 280px;
      display: flex;
      align-items: center;
      flex-direction: column;
      color: #819199;
      font-size: 18px;
      font-weight: bold;

      img {
        width: 48px;
        height: 48px;
        margin-bottom: 20px;
      }

      span {
        font-size: 14px;
        margin-top: 20px;
      }
    }

    .small-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .left {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .small-box > div {
      display: flex;
      align-items: center;

      .index {
        width: 44px;
        height: 44px;
        line-height: 44px;
        color: #5d80f5;
        border: 2px solid #5d80f5;
        border-radius: 50%;
        margin-bottom: 28px;
      }

      .el-icon-arrow-right {
        font-size: 50px;
        color: #ebf5fa;
        margin-left: 10px;
        margin-right: 40px;
      }
    }

    .el-button {
      color: #fff;
      background-color: #5b7ff1;
      font-size: 18px;
      margin: 80px auto 100px;
      font-weight: bold;
    }

    .small-tab {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 50px auto;

      div {
        cursor: pointer;
      }

      .small-active {
        color: #abc1cc;
      }
    }

    .role-tab {
      width: 700px;
      margin: 0 auto;
      display: flex;
      font-size: 18px;
      color: #566166;
      background-color: #ebf5fa;
      border-radius: 30px;

      div {
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 36px;
        box-sizing: border-box;

        span {
          font-size: 14px;
          color: #819199;
          margin-left: 16px;
        }
      }

      .role-active {
        background-color: #fff;
        border: 3px solid #ebf5fa;
        border-radius: 30px;
        box-sizing: border-box;
      }
    }
  }

  .bulletin-content {
    border-bottom: 1px solid #e4e7ed;

    .wrapper {
      display: flex;
      justify-content: space-between;
      color: #96a9b3;
      font-size: 14px;
      line-height: 36px;

      i {
        font-size: 12px;
        padding: 1px 6px;
        color: #fff;
        background-color: #24b47e;
        border-radius: 12px;
      }
    }
  }

  .el-carousel__item {
    color: #fff;

    h1 {
      font-size: 44px;
      margin: 150px 0 40px;
    }

    div {
      font-size: 18px;
      margin-bottom: 100px;
    }

    .el-button {
      font-size: 18px;
      color: #5d80f5;
      font-weight: bold;
    }
  }

  /deep/.el-carousel__button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }
}

.el-carousel__item:nth-child(2n) {
  background-image: url("~@/assets/banner2.jpeg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.el-carousel__item:nth-child(2n + 1) {
  background-image: url("~@/assets/banner1.jpeg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
</style>
